<script type="text/javascript">

    var model = {
        onRenderEnd: function() {

            $.ui.disableSelection($('#sortable-ex').get(0));

        },
        renderAt: '#containerDemo',
        title: 'Sortable Demos',
        demos: [
            {
                title: 'Sortable',
                desc: 'With few lines of code you could have sortable elements. You can try more options on the fly!',
                html: {url: 'templates/ui.sortable.ex1.html'},
                destroy: '$("#selectedUsers").sortable("destroy");',
                options: [
                    {
                        desc: 'Make a simple sortable list',
                        source:
                                '$("#selectedUsers").sortable({ connectWith: ["#userList"] }); ' +
                                '$("#userList").sortable({ connectWith: ["#selectedUsers"] });'
                    }
                ]
            },
            {
                title: 'Sortable',
                desc: 'Floating, with defined placeholder class',
                html: {url: 'templates/ui.sortable.ex3.html'},
                destroy: '$("#placeholderSortable").sortable("destroy");',
                options: [
                    {
                        desc: 'Floating, with defined placeholder class',
                        source: '$("#placeholderSortable").sortable({ placeholder: "ui-selected", forcePlaceholderSize: true, revert: true });'
                    }
                ]
            }

        ]
    };

    $(function() {

        uiRenderDemo(model);

    });

</script>